

<template>
	<div width="100%">
    <el-row>
    <span style="line-height:28px;font-size:12px">选择查看方式：</span>
    <el-radio style="line-height:28px" v-model="showType" :label="true">按时间</el-radio>
    <el-radio style="line-height:28px" v-model="showType" :label="false">按星期</el-radio>
    
   <cl-filter label="班级日期">
				<el-select
					size="mini"
					clearable
					v-model="form.class_date"
					@change="searchSubmit"
					style="width: 60px"
				>
					<el-option
						v-for="item in class_date_list"
						:key="item.value"
						:value="item.value"
						:label="item.label"
					></el-option>
				</el-select>
			</cl-filter>
      </el-row>
		<h1 style="text-align:center">{{form.class_date}}搭搭乐乐课程表</h1>
    <!-- <el-button @click="getclassScheduleClassWeek">发送请求</el-button> -->
    <!-- {{ClassgroupList}} -->
    <div class='printTable'>
		<el-table 
      v-show="showType"
      :data="listWeek"
      max-height="550px"
      border
      style="width: 100%"
      :header-cell-style="{ 'text-align': 'center','font-size':'15px','background-color':'#eef1f6','color':'#606266','font-weight':'1000px','font-family':'微软雅黑' }"
      :cell-style="{ 'text-align': 'center','height':'100px','font-size':'10px'}"
      >
			<el-table-column min-width='210' :fixed="item1==='classWeek'?'left':null" v-for="(item1,index) in classWeekList" :key="index" :prop="item1" :label="item1==='classWeek'?'上课时间':item1" :width="item1==='classWeek'?90:null">
        
        <template #default="scope" v-if="item1==='classWeek'?false:true">
          <!-- {{scope.row[item1]}} -->
          <el-card 
            v-for="item in ddd(scope.row[item1])" 
            :body-style="{ padding: '5px', textAlign: 'center' }"
            style="margin: 2px"  
            shadow="always"
            :key="item" 
            
            >
            

            <el-popover
              placement="top-start"
              :title="item.split('&')[1]"
              :width="200"
              trigger="hover"
              :content="ccc(item.split('&')[2])"
            >
              <template #reference>
                <el-tag class='btn-double-line' type='warning' size="mini">
                  <div>{{item.split("&")[0]}}</div>
                </el-tag>
              </template>
              <el-tag size="mini" v-for="keya in ccc(item.split('&')[2])" :key='keya'>{{keya}}</el-tag>
            </el-popover>
                  

            </el-card>
          </template>
      </el-table-column>
      
		</el-table>
    <el-table 
      v-show="!showType"
      :data="list"
      max-height="550px"
      border
      style="width: 100%"
      :header-cell-style="{ 'text-align': 'center','font-size':'15px','background-color':'#eef1f6','color':'#606266','font-weight':'1000px','font-family':'微软雅黑' }"
      :cell-style="{ 'text-align': 'center','height':'100px','font-size':'10px'}"
      >
			<el-table-column min-width='210' :fixed="item1==='classWeek'?'left':null" v-for="(item1,index) in classTimeList" :key="index" :prop="item1" :label="item1==='classWeek'?'上课星期':item1" :width="item1==='classWeek'?90:210">
        
        <template #default="scope" v-if="item1==='classWeek'?false:true">
          <el-card 
            v-for="item in ddd(scope.row[item1])" 
            :body-style="{ padding: '5px', textAlign: 'center' }"
            style="margin: 2px"  
            shadow="always"
            :key="item" 
            
            >
            

            <el-popover
              placement="top-start"
              :title="item.split('&')[1]"
              :width="200"
              trigger="hover"
              :content="ccc(item.split('&')[2])"
            >
              <template #reference>
                <el-tag class='btn-double-line' type='success' size="mini">
                  <div>{{item.split("&")[0]}}</div>
                </el-tag>
              </template>
              <el-tag size="mini" v-for="keya in ccc(item.split('&')[2])" :key='keya'>{{keya}}</el-tag>
            </el-popover>
                  

            </el-card>
          </template>
      </el-table-column>
      
		</el-table>
    </div>
	</div>
</template>

<script lang="ts">
import { computed, defineComponent, inject, onMounted, ref } from "vue";
import { useRefs } from "/@/core";
import { baseUrl, isDev } from "/@/config/env";
import request from "/@/service/request";
export default defineComponent({
  setup(){
    const { refs, setRefs } = useRefs();
		// 请求服务
		const service = inject<any>("service");

    const showType = ref(true)

    // 获取当前年份
		const getNowYear = function () {
			let date = new Date();
			date.getFullYear(); //获取完整的年份(4位)
      // alert(date.getMonth() + 1)
			let season = "";
			if (date.getMonth() + 1 >=2  && date.getMonth() + 1 <= 7) {
				season = "春季";
			}else if ((date.getMonth() + 1 >=9  && date.getMonth() + 1 <= 12) || date.getMonth() + 1 === 1) {
				season = "秋季";
        
			}
			return date.getFullYear() + "年" + season;
		};

    function handleEvn(url){
      if(isDev){
        url = "/dev/app/classgroup/classgroup/" + url
      }else{
        url = "/api/app/classgroup/classgroup/" + url
      }
      return url
    }


    const ClassgroupList = ref([])

    const classTimeList = ref(['classWeek'])

    const ddd = computed(() =>{
      return function(str){
        // console.log(str,'str');
        let a
        if (str){
          a = str.split('+')
        }
        return a
      }
    })

    const ccc = computed(() =>{
      return function(str){
        if(str){
          return str.split('-')
        }else{
          return ""
        }
        
      }
    })
    

    // 获取本季度的课程时间
    const getClassTimeList =async()=>{
      let url = "classTime"
      url = handleEvn(url)
      await request({url:url,method:"post",data:{class_date:form.value.class_date}}).then(res=>{
        res.forEach(item=>{
          classTimeList.value.push(item.classTime)
        })
        
      })
    }

    


    // const classWeekList = ref(['classWeek','Wednesday','Thursday','Friday','Saturday','Sunday'])
    const classWeekList = ref(['classWeek'])

    const listWeekList = ref([])

    // 获取本季度的课程时间
    const getClassWeekList =async()=>{
      let url = "classWeek"
      url = handleEvn(url)
      await request({url:url,method:"post",data:{class_date:form.value.class_date}}).then(res=>{
        res.forEach(item=>{
          classWeekList.value.push(item.classWeek)
        })
        
      })
    }


    const getclassScheduleClassWeek = async()=>{
      listWeekList.value = []
      let url = "classScheduleClassWeek"
      url = handleEvn(url)
      await request({url:url,method:"post",data:{class_date:form.value.class_date}}).then(res=>{
        res.forEach(item=>{
          const ret = item.classInfo.split(',')
          ret.forEach(item1=>{
            const rett = item1.split("+")
            classWeekList.value.forEach(item2=>{
              
              if (rett[0] === item2){
                // alert(rett[0])
                listWeekList.value.push({
                  classWeek: item.class_week,
                  [rett[0]]:rett[1]
                })
              }
            })
            // item.class_week = 
          })
        })
     })
     console.log(listWeek.value,"_------------------------")
    //  console.log(listWeek.value,'listWeek.value');
     
    }

    const listWeek = ref([])
  
    const handlelistWeek = (arry)=>{
      listWeek.value = []
      let now = ""
      
      arry.forEach(item=>{
        if (now ===""){
          now = item.classWeek
          listWeek.value.push(item)
        }else{
          if (item.classWeek === now){
            for (let key in item){
              for (let key1 in listWeek.value[listWeek.value.length-1]){
                if (key !=='classWeek'&& key ===key1 &&item[key] !==  listWeek.value[listWeek.value.length-1][key1]){
                  listWeek.value[listWeek.value.length-1][key1] = item[key] +'+'+ listWeek.value[listWeek.value.length-1][key1]
                }else{
                  listWeek.value[listWeek.value.length-1] = {...item,...listWeek.value[listWeek.value.length-1]}
                }
              }
            }
            // listWeek.value[listWeek.value.length-1] =  {...(listWeek.value[listWeek.value.length-1]),...item}
           
            
          }else{
            now = item.classWeek
            listWeek.value.push(item)
          }
        }
      })
      console.log(listWeek.value,'listWeek');
      
    }


    // 获取本季度的课程安排
    const getClassgroupList =async()=>{
      
      ClassgroupList.value = []
      let url = "classSchedule"

      url = handleEvn(url)
      await request({url:url,method:"post",data:{class_date:form.value.class_date}}).then(res=>{
        
        res.forEach(item=>{
          const ret = item.classInfo.split(',')
          ret.forEach(item1=>{
            const rett = item1.split("+")
            classTimeList.value.forEach(item2=>{
              
              if (rett[0] === item2){
                ClassgroupList.value.push({
                  classWeek: item.class_week,
                  [rett[0]]:rett[1]
                })
              }
            })
            // item.class_week = 
          })
        })
      })
    }




    
    var list = ref([])
    
    const handleWeek = (arry)=>{
      
      let now = ""
      
      arry.forEach(item=>{
        if (now ===""){
          now = item.classWeek
          list.value.push(item)
        }else{
          if (item.classWeek === now){
            for (let key in item){
              for (let key1 in list.value[list.value.length-1]){
                if (key !=='classWeek'&& key ===key1 &&item[key] !==  list.value[list.value.length-1][key1]){
                  list.value[list.value.length-1][key1] = item[key] +'+'+ list.value[list.value.length-1][key1]
                }else{
                  list.value[list.value.length-1] = {...item,...list.value[list.value.length-1]}
                }
              }
            }
            // list.value[list.value.length-1] =  {...(list.value[list.value.length-1]),...item}
           
            
          }else{
            now = item.classWeek
            list.value.push(item)
          }
        }
      })
      // console.log(list.value,'List');
      
    }
    onMounted(async ()=>{
      await getClassTimeList()
      await getClassWeekList()
      // let a
      // classTimeList.value.forEach(item => {
      //   a = {[item]:item}
      // })
      // console.log(a,'____aa');
      await getClassgroupList()
      await getclassScheduleClassWeek()
      // console.log(ClassgroupList.value,"++++");
      
      handleWeek(ClassgroupList.value)
      handlelistWeek(listWeekList.value)
      // console.log(ClassgroupList.value,'____');
      // console.log(list.value,'++++');
      
      await getClassDate()
      
    })
    const form = ref({
			class_date: getNowYear(),
		});
    // 定义班级日期
		const class_date_list = ref([]);
		// 获取班级日期
		const getClassDate = async function () {
			const res = await service.base.system.param.list({ keyName: "class_date" });
			// 将json字符串转换为json对象
			let classDate = eval("(" + res[0].data + ")");
			classDate.forEach((item) => {
				class_date_list.value.push({
					value: "" + item.value,
					label: item.label,
					type: "info"
				});
			});
		};

    // 筛选按钮提交
		const searchSubmit =async function () {
      ClassgroupList.value = []
      listWeekList.value = []
      list.value = []
      listWeek.value = []
      await getClassTimeList()
      await getClassWeekList()
      await getclassScheduleClassWeek()
      await getClassgroupList()
      console.log("ClassgroupList.value",ClassgroupList.value);
      console.log("listWeekList.value",listWeekList.value);
      handleWeek(ClassgroupList.value)
      handlelistWeek(listWeekList.value)
      // await getClassDate()
		};

    return{
      ClassgroupList,
      getClassgroupList,
      classTimeList,
      list,
      ddd,
      ccc,
      getNowYear,

      getclassScheduleClassWeek,
      showType,
      classWeekList,
      listWeek,
      class_date_list,
      form,
      searchSubmit
    }
  },

});
</script>
<style scoped>
.el-tag {
	margin-right: 5px;
	margin-top: 5px;
  margin-left: 0px;
}
/* .btn-double-line{
display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

height: 10rpx;

line-height: 46rpx;

}

.btn-double-line div{

display: flex;

flex-direction: column;

} */
.printTable .el-table .el-table__cell {
  padding: 0px 0px !important;
}

.printTable .el-table .cell{
  padding: 0px 0px !important;
  
}
.printTable .el-table table .cell {
    color: rgb(255,255,255) !important;
}
</style>
